<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>头像</title>
    <!-- 引入layui核心样式 -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
    <!-- 引入layui核心JS-->
    <script src="../../lib/layui/layui.js"></script>
    <style>
        body {
            background-color: #FFFFFF;
        }
        .upload-container {
            width: 132px;
            margin: 20px auto;
        }
        .upload-container img {
            width: 100%;
            height: 132px;
            box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
        }
        #message {
            margin-top: 11px;
            text-align: center;
        }
        #message>span {
            color: #FF5722;
        }
    </style>
</head>
<body>
<div class="upload-container">
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="avatar" style="" src="../../img/avatar.jpg" alt=""/>
        <div id="message"></div>
    </div>
    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="upload-progress">
        <div class="layui-progress-bar" lay-percent=""></div>
    </div>
</div>
</body>
<script>
    // 获取layui内置模块
    let upload = layui.upload
    let layer = layui.layer
    let element = layui.element
    let $ = layui.$

    layui.use(function() {
        initUpload()
        getAvatar()
    })

    /**
     * 获取当前登录用户的头像
     */
    function getAvatar() {
        $.get('/soms/server/user?type=getAvatar', function (result) {
            if (result.code === 200) {
                $('#avatar').attr('src', result.data)
            }
        })
    }

    /**
     * 定义上传的行为
     */
    function initUpload() {
        let uploadInst = upload.render({
            // 点击哪个元素弹出文件选择框
            elem: '#avatar',
            // 处理上传请求的地址
            url: '/soms/server/user?type=uploadAvatar',
            before: function (obj) {
                // 预览上传的图片，不支持ie8
                obj.preview(function (index, file, result) {
                    // 图片链接（base64）
                    $('#avatar').attr('src', result)
                })
                // 进度条复位
                element.progress('upload-progress', '0%')
                layer.msg('上传中', {icon: 16, time: 0})
            },
            // url正常响应，系统层面（Tomcat）的200状态码
            done: function (res) {
                // 业务层面的上传失败，响应结果code非200
                if (res.code !== 200) {
                    return layer.msg('上传失败')
                }
                // 上传成功的一些操作
                // 让home页面重新获取头像
                parent.getAvatar()
                // 清空错误信息
                $('#message').html('')
            },
            // url请求失败/错误响应，系统层面（Tomcat）的非200状态码
            error: function () {
                $('#message')
                    .html('<span>上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>')
                    .find('.demo-reload')
                    .on('click', function () {
                        uploadInst.upload()
                    })
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('upload-progress', n + '%')
                if (n === 100) {
                    layer.msg('上传完毕', {icon: 1})
                }
            }
        })
    }
</script>
</html>